<template>
	<transition name='fade'>
		<div class='pages shop-detail'>
			<div class='banners'>
				<van-swipe :autoplay="6000" style="height: 375px">
				  <van-swipe-item v-for="(item, index) in product.photos" :key="item.id" :style="'background: url('+ item +') no-repeat 50% 50%/ 50% 70%'"></van-swipe-item>
				</van-swipe>
			</div>

			<div class="detail_decoration" id="bigPromoteBanner">
				<div class="detail-adv">
					<img src="//img11.360buyimg.com/jdphoto/jfs/t21937/63/235611295/30701/316bc768/5b061bcdN629bec13.png.webp">
				</div>
			</div>


			<div class='pro-info section'>
				<div class='t'>
					<h2>
						<i class='hd hd-1'>hd-1</i>
						<i class='hd hd-2'>hd-2</i>
						{{ product.name }}
					</h2>

					<p class='follow' @click="toggleAdd">
						<Icon type="ios-heart-outline" class='icon hollow' v-if="!isLike"></Icon>
						<Icon type="ios-heart" class='icon solid' v-else></Icon>
						<span>喜欢</span>
					</p>
				</div>

				<div class='price'>
					<p class='new-pri'>￥<em>{{ product.true_price }}</em> <i class='fracture hd'>{{ ~~(product.true_price / product.old_price) * 100 }}折</i> <i class='notice'>降价通知</i></p>

					<p class="old-pri">￥<em>{{ product.old_price }}</em></p>
				</div>
			</div>

			<div class='comment section'>
				<div class='t'>
					<p class='left'>
						<span>评论</span>
						<span>好评 <em>{{ comment.praise_rate }}%</em></span>
					</p>

					<p class='right'>
						<span>共<em>{{ comment.count > 999999 ? '999999+' : comment.count }}</em>条</span>
						<Icon type="ios-arrow-right" class='icon'></Icon>
					</p>
				</div>

				<div class='tag'>
					<Tag checkable color="#fdf0f0">好评({{ comment.praise_one }})</Tag>
				    <Tag checkable color="#fdf0f0">中评({{ comment.praise_two }})</Tag>
				    <Tag checkable color="#f1f1f1">差评({{ comment.praise_three }})</Tag>
				</div>

				<div class='comment-list'>
					<div class='comment-item' v-for="(item, index) in comment.items" :key="item.id">
						<div class="head">
							<p>
								<span class="user">{{ item.nickname }}</span>
								<Rate disabled v-model="item.rate/20" class='rate'></Rate>
							</p>
							<span class='date'>{{ item.cTime }}</span>
						</div>

						<div class="comment-con">
							{{ item.content }}
						</div>

						<div class='comment-pic pic-wrap'>
							<img src="//img30.360buyimg.com/shaidan/s128x96_jfs/t10621/338/2689874023/256648/5cef6f81/59fc44a7Nb58e01a7.jpg!cc_100x100.dpg" alt="..." />
							<img src="//img30.360buyimg.com/shaidan/s128x96_jfs/t10621/338/2689874023/256648/5cef6f81/59fc44a7Nb58e01a7.jpg!cc_100x100.dpg" alt="..." />
						</div>
					</div>
				</div>

				<div class='more'>
					<span>
						查看更多评论
						<Icon type="ios-arrow-right" class='icon'></Icon>
					</span>
				</div>
			</div>

			<div class='params section'>
				<div class='head'>
					<p v-for="(item, index) in tabs" :key="item.id" :class="{active: activeTab == index}" @click="tabToggle(index)">{{ item }}</p>
				</div>

				<div class='content'>
					<div v-for="(item, index) in tabs" :key="item.id" :class="{active: activeTab == index}">
						
					</div>
				</div>
			</div>

			<van-goods-action>
  				<van-goods-action-mini-btn icon="chat" text="客服" />
  				<van-goods-action-mini-btn icon="shop" text="店铺" />
			  	<van-goods-action-mini-btn icon="cart" text="购物车" @click="toCarts" />
			  	<van-goods-action-big-btn text="加入购物车" @click="showSku" />
			  	<van-goods-action-big-btn text="立即购买" @click="showSku" primary />
			</van-goods-action>

			<van-sku
			  v-model="showBase"
			  :sku	 ="sku"
			  :close-on-click-overlay="!0"
			  :goods = "goods"
			  :goods-id = "goodsId"
			  :hide-stock="sku.hide_stock"
			  @add-cart="addCart"
			  @buy-clicked="buyPro"
			/>
		</div>
	</transition>
</template>

<script>
	import ProductsGrid from 'base/ProductsGrid'

	export default{
		components: {
			ProductsGrid
		},
		data() {
			return {
				showBase 	: false,
				rate 		: 2,
				loading		: true,
				sku: {
				  // 所有sku规格类目与其值的从属关系，比如商品有颜色和尺码两大类规格，颜色下面又有红色和蓝色两个规格值。
				  // 可以理解为一个商品可以有多个规格类目，一个规格类目下可以有多个规格值。
				  tree: [
				    {
				      k: '规格', // skuKeyName：规格类目名称
				      v: [
				        {
				          id: '30349', // skuValueId：规格值 id
				          name: '红色', // skuValueName：规格值名称
				        },
				        {
				          id: '1215',
				          name: '蓝色',
				        }
				      ],
				      k_s: 's1' // skuKeyStr：sku 组合列表（下方 list）中当前类目对应的 key 值，value 值会是从属于当前类目的一个规格值 id
				    }
				  ],
				  // 所有 sku 的组合列表，比如红色、M 码为一个 sku 组合，红色、S 码为另一个组合
				  list: [
				    {
				      id: 2259, // skuId，下单时后端需要
				      price: 100, // 价格（单位分）
				      s1: '30349', // 规格类目 k_s 为 s2 的对应规格值 id
				      stock_num: 222 // 当前 sku 组合对应的库存
				    },
				    {
				      id: 2259, // skuId，下单时后端需要
				      price: 100, // 价格（单位分）
				      s1: '1215', // 规格类目 k_s 为 s2 的对应规格值 id
				      stock_num: 111 // 当前 sku 组合对应的库存
				    }
				  ],
				  price: '1.00', // 默认价格（单位元）
				  stock_num: 227, // 商品总库存
				  collection_id: 2261, // 无规格商品 skuId 取 collection_id，否则取所选 sku 组合对应的 id
				  none_sku: false, // 是否无规格商品
				  messages: [
				    {
				      // 商品留言
				      datetime: '0', // 留言类型为 time 时，是否含日期。'1' 表示包含
				      multiple: '0', // 留言类型为 text 时，是否多行文本。'1' 表示多行
				      name: '留言', // 留言名称
				      type: 'text', // 留言类型，可选: id_no（身份证）, text, tel, date, time, email
				      required: '1' // 是否必填 '1' 表示必填
				    }
				  ],
				  hide_stock: false // 是否隐藏剩余库存
				},
				goodsId 	: 0,
				goods: {
				  // 商品标题
				  title: '测试商品',
				  // 默认商品 sku 缩略图
				  picture: 'https://img.yzcdn.cn/1.jpg'
				},
				banners     : [{
		          cover     : '/static/images/icon.png',
		          slide_name: '----'
		        },{
		          cover     : '/static/images/icon.png',
		          slide_name: '----'
		        },{
		          cover     : '/static/images/icon.png',
		          slide_name: '----'
		        }],
		        product 	: {},
		        params 		: {
		        	status 	: 0,
					p 		: 1,
					limit 	: 2,
					id 		: 0,
					type 	: 'product'
		        },
		        bookParams  : {
		        	id 		: 0,
		        	type 	: 'product',
		        	status  : 0
		        },
		        comment 	: {
		        	count 	: 0,
		        	items 	: []
		        },
		        commentParams: {
		        	title 	: '',
					content : 'asdasdads',
					id 		: 0
		        },
		        activeTab 	: 0,
		        tabs 		: ['商品介绍', '规格参数', '售后保障'],
		        shop 		: {},
		        shops 		: [],
		        isLike 		: false,
		        prompt      : {
					hidden	: false,
					loading : false,
					title   : '评论列表',
					text    : '空空如也'
				}
			}
		},
		created() {
			setTimeout(() => {
				this.topShow 	= true
				this.bottomShow = true
				this.loading 	= false
			}, 2000)

		},
		activated() {
			let id 			= this.$route.query.id
			this.goodsId 	= id
			this.getShop(id)
			this.getComment(id)
			this.queryBook(id)
		},
		methods: {
			getShop(id) {
				this.HttpService.getShop({id: id}).then(data => {
					let d = data.data
					let p = d.product
					if(!data.status) {
						this.shop 				= d
						this.product 			= p
						this.goods.title		= p.name
						this.goods.picture      = p.cover
						this.normalSku(data.sku)
					}
				})
			},
			getComment(id) {
				let params 			= this.params
					params.id 		= id
				let prompt 					= this.prompt
					prompt.hidden 			= !1
					prompt.loading 			= !0

 				this.HttpService.getComment(params).then(data => {
 					let d                   = data.items
					prompt.loading 			= !0
 					this.comment 			= data

 					if(!d || d.length) {
 						prompt.hidden 			= !0
 					}
 				})
			},
			addCart(a) {
				let obj 		= this.getParams(a)
				this.HttpService.postCart(obj).then(data => {
					if(!data.status) {
						this.$Message.success(data.msg)
						setTimeout(() => {
							this.showBase = !this.showBase
						}, 1000)
					} else {
 						this.$Message.error(data.msg)
					}
				})
			},
			buyPro(a) {
				let obj 		= this.getParams(a)
				this.HttpService.postCart(obj).then(data => {
					this.util.removeStorageSync('cart')
					this.normalShop(this.shop, a)
					this.util.setStorageSync('carts', this.shops)
					this.$router.push('/shop/confirm')
				})
			},
			addBook() {
				let params         = this.bookParams
					params.id 	   = this.goodsId
					this.HttpService.addBook(params).then(data => {
						if(!data.status) {
							this.$Message.success('添加成功')
						} else {
							this.$Message.error(data.msg)
						}
					}) 
			},
			cancelBook() {
				let params 		    = this.bookParams
					params.id 		= this.goodsId
				this.HttpService.cancelByModel(params).then(data => {
					if(!data.status) {
						this.$Message.success('取消收藏成功')
					} else {
						this.$Message.error('取消失败啦')
					}
 				})
			},
			queryBook(i) {
				let params 			= this.bookParams
					params.id       = i
					this.HttpService.queryBook(params).then(data => {
						this.isLike = !data.status ? true : false
					})
			},
			toggleAdd() {
				this.isLike ? this.cancelBook() : this.addBook()
				this.isLike = !this.isLike
			},
			getParams(a) {
				console.log(a)
				let obj  = {}
					obj.msg 	= a.cartMessages['留言']
					obj.id 		= this.goodsId
					obj.sku_id 	= a.selectedSkuComb.id
					obj.num 	= a.selectedNum
					obj.price   = a.selectedSkuComb.price / 100

				return obj	
			},
			showSku() {
				this.showBase = !this.showBase
			},
			normalSku(s) {
				let sku     		= this.sku
				let i 				= '0'
				let map 			= {}

				sku.price 			= this.product.true_price
				sku.stock_num 		= s.count * 1

				s.data.forEach((n, i) => {
					let name = n['spec']
					if(!map[name]) {
						map[name] 	= []
					}
					map[name].push(n)
				})
				let tree = []
				let list = []
				for(let key in map) {
					let obj = {}
					let arr = map[key]
						obj.k 	= key.split(':')[1]
						obj.v 	= []
						obj.k_s = i
						for(let j = 0; j < arr.length; j++) {
							let o = arr[j]
							let a = {id: o.id, price: o.true_price * 100, stock_num: o.stock}
							a[i]   = o.id
							obj.v.push({id: o.id, name: o.prop})
							list.push(a)
						}

						tree.push(obj)
					i++
				}

				console.log(list)
				sku.tree = tree
				sku.list = list
			},
			normalShop(s, sku) {
				s.products = []
				let product = s.product
				s.products.push(Object.assign(product,this.getParams(sku)))
				s.product = {}
				this.shops.push(s)
			},
			toCarts() {
				this.$router.push('/shop/cart')
			},
			onBuyClicked() {

			},
			onAddCartClicked() {

			},
			tabToggle(i) {
				if(i == this.activeTab) return
				this.activeTab = i
			},
			toggle(name) {
				this[name] = !this[name]
			}
		}
	}
</script>

<style scoped lang="stylus" rel="stylesheet/stylus">
	@import "~@/common/stylus/variable.styl"
	@import "~@/common/stylus/mixin.styl"
	@import "./index.css"
	
	::-webkit-scrollbar
		width: 0
	
	em, i
		font-style: normal
		
	.detail_decoration
		position: relative
		z-index: 5
		.detail-adv
			width: 100%
			padding-top: 13.33333%
			overflow: hidden
			img
				position: absolute
				left: 0
				top: 0
				width: 100%
	
	.section
		padding: 0
		margin: 0
		&:before
			content:''
			display: block
			padding-top: 10px
			background-color: #e8e8ed

	.hd
		display: inline-block
		transform: scale(0.85)
		br(3px)
		padding: 0 4px
		font-size: 12px
	.rate
		transform: scale(0.6) translate3d(-32px, 0, 0)
		
	.pro-info
		.t
			display: flex
			height: 62px
			line-height: 18px
			padding: 15px 10px 10px
			overflow-wrap: hidden
			font-size: 14px
		i.hd-1, i.hd-2
			background-color: red
			color: #fff
		i.hd-2
			margin-right: 5px	
		h2
			flex: 1
			padding-right: 10px
		.follow
			display: flex
			width: 50px	
			flex-wrap: wrap
			align-items: center
			justify-content: center
			border-left: 1px solid #eee
			.icon
				width: 100%
				text-align: center
				font-size: 18px
				&.solid
					color: #f60
			span
				font-size: 12px	
		.price
			padding: 0 10px
			line-height: 24px
			.new-pri
				position: relative
				margin-bottom: 5px
				color: red
				em
					font-size: 16px
					font-weight: bold
				.fracture
					margin-left: 5px
					border: 1px solid red
					line-height: 14px
				.notice
					position: absolute
					right: 0
					top: 4px
					padding: 0 5px
					color: #555
					border: 1px solid #999
					br(3px)
					line-height: 16px
			.old-pri
				text-decoration: line-through		
	
	.comment
		.t
			display: flex
			hh(45px)
			padding: 0 10px
			border-bottom:1px solid #e1e1e1
			.left
				width: 50%
				text-align: left
				span:last-child
					margin-left: 10px
					color: red
					em
						font-weight: bold
			.right
				width: 50%
				text-align: right		
				text-indent: 8px
				.icon
					position: relative
					top: 3px
					font-size: 20px
		.tag
			padding: 15px 10px	
		.comment-list
			position: relative
			min-height: 150px
			padding: 0 10px	
		.comment-item
			padding: 10px 0
			border-bottom: 1px solid #e1e1e1
			.head
				display: flex
				hh(24px)
				margin-bottom: 4px
				no-wrap()
				p
					flex: 1
				span
					width: 104px
					text-align: center		
			.comment-con
				max-height: 45px
				margin: 6px 0
				line-height: 15px
				text-align: justify
				overflow: hidden	
			.comment-pic
				img
					width: 68px
					height: 68px
					margin-right: 6px
					&:last-child
						margin-right: 0
		.more
			hh(45px)
			text-align: center
			span
				display: inline-block
				hh(25px)
				padding: 0 10px
				br(10px)
				border: 1px solid #e1e1e1
				.icon
					position: relative
					top: 2px
					font-size: 16px
	.params
		.head
			display: flex
			border-bottom: 1px solid #e1e1e1
			p
				flex: 1
				text-align: center
				line-height: 40px
				border-right: 1px solid #e1e1e1
				&.active
					color: #d91100
				&:last-child
					border-right: none
		.content
			padding: 10px
			div
				display: none
				&.active
					display: block					

	.loading
		position: fixed
		top: 50px
		bottom: 55px
		left: 0
		right: 0
		z-index: 999
		width: auto
		height: auto
	
	.move-enter-active, .move-leave-active
		transition:all 0.4s
	.move-enter
		transform: translate3d(100%, 0px, 0)
	.move-leave
		transform: translate3d(0, 0, 0)
		
	.bottom-enter-active, .bottom-leave-active
		transition:all 0.4s cubic-bezier(1.0, 0.5, 0.8, 1.0)
	.bottom-enter
		transform: translate3d(0, 55px, 0)
	.bottom-leave
		transform: translate3d(0, 0px, 0)
</style>